<template>
<section class="zone-title">
  <div class="headline clearfix">
    <i class="icon icon_t icon-douga"></i>
    <a class="name">动画</a>
    <div class="bili-tab">
      <div class="bili-tab-item on">有新动态</div>
      <div class="bili-tab-item">最新投稿</div>
    </div>
    <a href="" target="_blank" class="fire">
      <i class="icon pmt-icon"></i>
      魔法少女：我还能再抢救一下
    </a>
    <a class="link-more">更多<i class="icon"></i></a>
    <div class="read-push">
      <i class="icon icon_read"></i>
      <span class="info">
        <b>122424</b>
        条新动态
      </span>
    </div>
  </div>
</section>
</template>

<script>
export default {
  name: 'browhead',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    };
  }
};
</script>
<style lang="stylus" scoped>
.zone-title
  .icon-douga
    background-position -141px -908px
.bili-tab
  float left
  margin 0 10px 0 0
  overflow hidden
  zoom 1
  .bili-tab-item
    float left
    position relative
    height 20px
    line-height 20px
    cursor pointer
    padding 1px 0 2px
    border-bottom 1px solid transparent
    margin-left 12px
    transition .2s
    transition-property border,color
    &:first-child
      margin-left 0
    &:before
      content ""
      position absolute
      left 50%
      margin-left -3px
      bottom 0
      width 0
      height 0
      border 3px dashed #00a1d6
      border-bottom-style solid
      border-top 0
      border-left-color transparent
      border-right-color transparent
      display none
    &.on
      background-color transparent
      border-color #00a1d6
      color #00a1d6
      &:before
        display block
</style>
